<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="检测时间" prop="findTime">
        <el-date-picker
          v-model="formData.findTime"
          type="date"
          value-format="x"
          placeholder="选择检测时间"
        />
      </el-form-item>

      <el-form-item label="机器人编号" prop="robotCode">
        <el-input v-model="formData.robotCode" placeholder="请输入机器人编号" />
      </el-form-item>
      <el-form-item label="机器人名称" prop="robotName">
        <el-input v-model="formData.robotName" placeholder="请输入机器人名称" />
      </el-form-item>
      <el-form-item label="任务类型" prop="workType">
        <el-select v-model="formData.workType" placeholder="请选择任务类型">
          <el-option label="质保中" value="1" />
          <el-option label="质保外" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="优先级" prop="priority">
        <el-select v-model="formData.priority" placeholder="请选择优先级">
          <el-option label="低" value="1" />
          <el-option label="普通" value="2" />
          <el-option label="高" value="3" />
          <el-option label="紧急" value="4" />
          <el-option label="立刻" value="5" />
        </el-select>
      </el-form-item>

      <el-form-item label="任务描述" prop="affairsRemark">
        <el-input
          v-model="formData.affairsRemark"
          placeholder="请输入任务描述"
        />
      </el-form-item>
      <el-form-item label="客户" prop="customer">
        <el-input v-model="formData.customer" placeholder="请输入客户" />
      </el-form-item>

      <el-form-item label="处理状态" prop="handleStatus">
        <el-radio-group v-model="formData.handleStatus">
          <el-radio label="0"> 未处理 </el-radio>
          <el-radio label="1"> 处理中 </el-radio>
          <el-radio label="2"> 已处理 </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading"
        >确 定</el-button
      >
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
// import { getIntDictOptions, DICT_TYPE } from "@/utils/dict";
import { RobotAffairApi, RobotAffairVO } from "@/api/health/robotaffair";

/** 事务处理 表单 */
defineOptions({ name: "RobotAffairForm" });

const { t } = useI18n(); // 国际化
const message = useMessage(); // 消息弹窗

const dialogVisible = ref(false); // 弹窗的是否展示
const dialogTitle = ref(""); // 弹窗的标题
const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref(""); // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  robotId: undefined,
  robotCode: undefined,
  robotName: undefined,
  workType: undefined,
  priority: undefined,
  handleStatus: undefined,
  affairsRemark: undefined,
  customer: undefined,
  findTime: undefined,
  heathCode: undefined,
  sort: undefined,
});
const formRules = reactive({
  customer: [{ required: true, message: "客户不能为空", trigger: "blur" }],
  findTime: [{ required: true, message: "检测时间不能为空", trigger: "blur" }],
});
const formRef = ref(); // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true;
  dialogTitle.value = t("action." + type);
  formType.value = type;
  resetForm();
  // 修改时，设置数据
  if (id) {
    formLoading.value = true;
    try {
      formData.value = await RobotAffairApi.getRobotAffair(id);
    } finally {
      formLoading.value = false;
    }
  }
};
defineExpose({ open }); // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(["success"]); // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate();
  // 提交请求
  formLoading.value = true;
  try {
    const data = formData.value as unknown as RobotAffairVO;
    if (formType.value === "create") {
      await RobotAffairApi.createRobotAffair(data);
      message.success(t("common.createSuccess"));
    } else {
      await RobotAffairApi.updateRobotAffair(data);
      message.success(t("common.updateSuccess"));
    }
    dialogVisible.value = false;
    // 发送操作成功的事件
    emit("success");
  } finally {
    formLoading.value = false;
  }
};

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    robotId: undefined,
    robotCode: undefined,
    robotName: undefined,
    workType: undefined,
    priority: undefined,
    handleStatus: undefined,
    affairsRemark: undefined,
    customer: undefined,
    findTime: undefined,
    heathCode: undefined,
    sort: undefined,
  };
  formRef.value?.resetFields();
};
const priorityStatus = (status) => {
  const STATUSES = [
    { priority: 1, name: "低" },
    { priority: 2, name: "普通" },
    { priority: 3, name: "高" },
    { priority: 4, name: "紧急" },
    { priority: 5, name: "立刻" },
  ];
  const matched = STATUSES.find((item) => item.priority === status);
  return matched ? matched.name : "";
};
const workTypeStatus = (status) => {
  const STATUSES = [
    { workType: 1, name: "质保中" },
    { workType: 2, name: "质保外" },
  ];
  const matched = STATUSES.find((item) => item.workType === status);
  return matched ? matched.name : "";
};
const handStatus = (status) => {
  const STATUSES = [
    { handleStatus: 0, name: "未处理" },
    { handleStatus: 1, name: "处理中" },
    { handleStatus: 2, name: "已处理" },
  ];

  const matched = STATUSES.find((item) => item.handleStatus === status);
  return matched ? matched.name : "";
};
</script>
